<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="page">
    <k-navbar custom-style="bg-transparent" :leftArrow="false"></k-navbar>

    <view class="mt-[52rpx] mx-[38rpx] flex">
      <wd-img
        :src="isLogin ? userInfo?.avatar : '/static/logo.png'"
        :round="true"
        width="94rpx"
        height="94rpx"
        @click="to('pages-sub/person/person-info')"
      ></wd-img>
      <view class="ml-[20rpx]">
        <view class="flex items-center text-base text-[36rpx] font-bold">
          <text>{{ isLogin ? userInfo.nickname : '请先登录' }}</text>
          <image
            v-if="isLogin && userInfo.image"
            :src="userInfo.image"
            class="ml-[20rpx] w-[144rpx] h-[36rpx]"
            @click="to('pages-sub/person/lv')"
          ></image>
        </view>
        <text class="text-[#9A9A9A] text-xs mt-[11rpx]" v-if="isLogin && userInfo.mobile">
          账号：{{ userInfo.mobile }}
        </text>
      </view>
    </view>

    <view v-if="isLogin" class="flex justify-around mt-[44rpx] text-base px-[20rpx]">
      <view
        class="flex flex-col justify-center items-center"
        v-for="(item, index) in state.records"
        :key="index"
        @click="to(`pages-sub/person/${item.url}`)"
      >
        <text class="text-[38rpx] mb-[2rpx]">{{ userInfo[item.key] || 0 }}</text>
        <text class="text-[22rpx]">{{ item.name }}</text>
      </view>
    </view>

    <view class="mt-[70rpx]">
      <view
        v-if="isLogin && !userInfo.city"
        class="px-[20rpx] mb-4"
        @click="to(`pages-sub/person/person-info`)"
      >
        <wd-notice-bar
          :text="`完成个人信息填写，可获得${userInfo.profileIntegral}积分奖励`"
          type="info"
          prefix="warning"
          color="#4d80f0"
          :scrollable="false"
        />
      </view>
      <view v-if="isLogin && state.clockLst.length" class="plate">
        <view class="plate-title flex justify-between items-center">
          <text>学习打卡管理</text>
          <view class="text-xs text-[#9A9A9A] font-normal flex items-center" @click="openRulePopup">
            <text>规则</text>
            <wd-icon name="caret-right-small" size="32rpx" />
          </view>
        </view>
        <scroll-view class="w-full mt-4 pb-[20rpx]" scroll-x>
          <view class="flex text-[20rpx]">
            <view
              class="flex flex-col justify-center"
              v-for="(item, index) in state.clockLst"
              :key="index"
            >
              <view class="flex items-center">
                <view
                  class="w-[54rpx] h-[54rpx] flex justify-center items-center rounded-1/2"
                  :class="[item.is_sign ? 'bg-primary' : 'bg-[#F4F4F4]']"
                >
                  <image
                    v-if="item.is_sign"
                    class="w-[30rpx] h-[22rpx]"
                    src="/static/images/gouzi.png"
                    mode="aspectFill"
                  />
                  <text class="text-xs" v-else>+{{ item.integral }}</text>
                </view>
                <view
                  v-if="index !== state.clockLst.length - 1"
                  class="bg-[#F4F4F4] w-[26rpx] h-[1px] mx-1.5"
                ></view>
              </view>

              <text
                class="mt-[14rpx]"
                :class="[item.is_sign ? 'text-[#3F3F3F]' : 'text-[#9A9A9A]']"
              >
                {{ formatDateOrToday(item.day) }}
              </text>
            </view>
          </view>
        </scroll-view>
        <!-- <view class="text-base text-xs">已连续打卡2天，再连续打卡2天可得双倍积分</view> -->
      </view>

      <view v-if="isLogin" class="plate">
        <view class="plate-title flex justify-between items-center">
          <text>我的分销</text>
          <view
            class="text-xs text-[#9A9A9A] font-normal flex items-center"
            @click="to(`pages-sub/person/team`)"
          >
            <text>详情</text>
            <wd-icon name="caret-right-small" size="32rpx" />
          </view>
        </view>
        <view class="flex mt-4 pb-[20rpx]">
          <view
            class="distribution"
            v-for="(item, index) in state.distribution"
            :key="index"
            @click="to(`pages-sub/person/${item.url}`)"
          >
            <text
              v-if="item.key === 'distributionLevel' && userInfo.distributionLevel"
              class="text-[38rpx] mb-[2rpx]"
            >
              {{ userInfo.distributionLevel.id }}
            </text>
            <text v-else class="text-[38rpx] mb-[2rpx]">{{ userInfo[item.key] }}</text>
            <text class="text-[22rpx]">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <view class="plate">
        <view class="plate-title">
          <text>更多功能</text>
        </view>
        <view class="flex flex-wrap pb-[28rpx]">
          <view
            class="relative flex flex-col w-1/4 justify-center items-center mt-[50rpx]"
            v-for="(item, index) in state.services"
            :key="index"
            @click="handleServicesJump(item.url)"
          >
            <wd-img :src="item.icon" width="50rpx" height="50rpx" mode="aspectFill"></wd-img>
            <text class="text-[#3F3F3F] text-xs mt-[11rpx]">{{ item.name }}</text>
            <button
              v-if="item.key == 'kefu'"
              open-type="contact"
              class="absolute w-full h-full opacity-0"
            ></button>
          </view>
        </view>
      </view>
    </view>

    <wd-overlay :show="!isLogin" @click="toLogin" customStyle="background: transparent" />

    <!-- <k-get-user-info-popup v-if="isLogin" v-model="state.showPopup"></k-get-user-info-popup> -->

    <wd-popup
      v-model="state.showRulePopup"
      position="bottom"
      custom-class="rounded-lg"
      :safe-area-inset-bottom="true"
      @close="closeRulePopup"
    >
      <view class="flex justify-between items-center p-4 text-base">
        <text>规则</text>
        <wd-icon name="close" size="22rpx" color="#141719" @click="closeRulePopup"></wd-icon>
      </view>

      <view class="text-base text-[26rpx] px-4 pb-4">
        <uv-parse :nodes="imgDeal(state.clockRule)"></uv-parse>
      </view>
    </wd-popup>
  </view>
</template>
<script setup>
import dayjs from 'dayjs'
import { to, toLogin } from '@/utils/navigation'
import { imgDeal } from '@/utils/format'
import useUserStore from '@/store/user'
import { fetchClockRules, fetchClockRule } from '@/service/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLogin = computed(() => userStore.isLogin)

const state = ref({
  clockRule: '',
  showRulePopup: false,
  showPopup: false,
  clockLst: [],
  services: [
    {
      name: '我的发布',
      icon: '/static/images/mine/release.png',
      url: 'publish',
    },
    {
      name: '我的参与',
      icon: '/static/images/mine/join.png',
      url: 'join',
    },

    {
      name: '商务合作',
      icon: '/static/images/mine/cooperate.png',
      url: 'cooperation',
    },
    {
      name: '平台消息',
      icon: '/static/images/mine/msg.png',
      url: 'message',
    },
    {
      name: '优惠劵',
      icon: '/static/images/mine/coupon.png',
      url: 'coupon',
    },
    {
      name: '推广二维码',
      icon: '/static/images/mine/qrcode.png',
      url: 'qrcode',
    },
    {
      name: '会员中心',
      icon: '/static/images/mine/lv.png',
      url: 'lv',
    },
    {
      name: '客服',
      icon: '/static/images/mine/kefu.png',
      key: 'kefu',
    },
  ],
  distribution: [
    {
      name: '分销等级',
      value: 0,
      url: 'team',
      key: 'distributionLevel',
    },
    {
      name: '可提现佣金',
      value: 0,
      url: 'withdraw',
      key: 'user_earnings',
    },
    {
      name: '团队成员',
      value: 0,
      url: 'team',
      key: 'team',
    },
  ],
  records: [
    {
      name: '我的课程',
      value: 0,
      key: 'order_count',
      url: 'course',
    },
    {
      name: '我的收藏',
      value: 0,
      key: 'collect_count',
      url: 'collect',
    },
    {
      name: '历史记录',
      value: 0,
      key: 'goods_visit',
      url: 'history',
    },
    {
      name: '我的积分',
      value: 0,
      key: 'user_integral',
      url: 'points',
    },
  ],
})

function handleServicesJump(url) {
  if (url) to(`pages-sub/person/${url}`)
}
function getClockRules() {
  fetchClockRules().then((res) => {
    state.value.clockLst = res.data.lists
  })
}

function openRulePopup() {
  uni.hideTabBar()
  if (!state.value.clockRule) {
    fetchClockRule().then((res) => {
      state.value.clockRule = res.data.remark
      state.value.showRulePopup = true
    })
  } else {
    state.value.showRulePopup = true
  }
}

function closeRulePopup() {
  uni.showTabBar()
  state.value.showRulePopup = false
}

function openPopup() {
  uni.hideTabBar()
  state.value.showPopup = true
}

function formatDateOrToday(inputDate) {
  const date = dayjs(inputDate) // 转换为 dayjs 对象
  const isToday = date.isSame(dayjs(), 'day') // 判断是否是今天
  return isToday ? '今天' : date.format('MM.DD') // 返回 "今天" 或格式化日期
}

onShow(() => {
  if (userStore.isLogin) {
    userStore.getUserInfo()
    getClockRules()
  }
})
</script>

<style lang="scss" scoped>
.page {
  @apply bg-[#f4f4f4];
  height: 100vh;

  .plate {
    @apply bg-white rounded-sm px-4;
    padding: 22rpx 30rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    margin-left: 20rpx;

    &-title {
      @apply text-base font-bold text-[30rpx];
    }

    .distribution {
      @apply flex flex-col justify-center items-center relative w-1/3;

      &::after {
        height: 48rpx;
        content: '';
        border-right: 1px solid #e2e2e2;
        @apply absolute right-0 top-1/2 transform -translate-y-1/2;
      }

      &:last-child {
        &::after {
          @apply hidden;
        }
      }
    }
  }
}
</style>
